import React, { useState } from "react";

// 需求是： 文字会变，多个按钮也就变
// 确定要传递一个标题和一个数组进来
interface IProp {
  list: SelectListProp[];
  title: string;
  onChange: (value: string) => void;
}
export default function SubItem({ title, list, onChange }: IProp) {
  const [index, setIndex] = useState(0);
  const change = (index: number, value: string) => {
    // 修改当前索引来控制按钮的高亮
    setIndex(index);
    // 子传父
    onChange(value);
  };
  return (
    <div className="item">
      <h4>{title}</h4>
      <ul className="flex">
        {list.map((item, i) => (
          <li
            key={item.en}
            className={index === i ? "active" : ""}
            onClick={() => change(i, item.en)}
          >
            {item.cn}
          </li>
        ))}
      </ul>
    </div>
  );
}
